<template>
	<view class="home">
		<view class="give" @click="navigation_address">
			<view class="give_song">送</view>
			<view class="content_give">{{Select_Address}}</view>
			<view class="iconfont icon-jiantou"></view>
		</view>

		<u-form :model="message" ref="uForm">
			<view class="take" @click="if_show">
				<view class="take_qu">印</view>
				<view class="content_take" v-model="message.Address">{{message.Address_Print}}</view>
				<view class="iconfont icon-xiangxiajiantou"></view>
			</view>

			<view class="take_address" v-show="show_address === true">
				<view class="" hover-class="take_Address_hover" v-for="item in address" :key="item.id" @click="selectAddress(item.id)">{{item.address}}</view>
			</view>
			<u-form-item label="备注信息:" label-width="150" label-align="center" prop="Notes">
				<u-input v-model="message.Notes" placeholder="请输入备注信息,例如复印条件等等" />
			</u-form-item>

			<!-- 规格区域 -->
			<view class="size">
				<view class="" style="margin-right: 6px;">规格(必选):</view>
				<radio-group @change="ChangeSize">
					<label class="size_item" v-for="(item,index) in specifications" :key="index">
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<view class="money">总价格:<text>{{message.money}}</text>元</view>
		</u-form>

		<!-- 支付区域 -->
		<view class="giveMe_money">
			<view class="manner">
				支付方式
			</view>
			<view class="payment">
				<radio-group class="payment_items" @change="radioChange">
					<label class="payment_item" v-for="(item,index) in radioItems" :key="index">
						<view>
							<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
						</view>
						<view>
							<label class="payment_name" :for="item.name">
								<text>{{item.values}}</text>
							</label>
						</view>
					</label>
				</radio-group>
			</view>
		</view>

		<u-mask :show="show_Mask" @click="show_Mask = false" z-index="500">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="rect_item1">
						<image src="../../static/icon/Error.png" mode="" @click="show_Mask = false"></image>
						<view class="">请输入支付密码</view>
					</view>
					<view class="rect_item2">长大跑腿</view>
					<view class="rect_item3">{{message.money}}元</view>

					<view @click="input_focus">
						<!-- :dot-fill="true" -->
						<u-message-input :focus="true" :breathe="true"  width="43" style="margin-top: 40px;border: 1px solid #FFFFFF;"
						 v-model="password" :disabled-keyboard="true" :maxlength="6"></u-message-input>
					</view>
				</view>
			</view>
		</u-mask>
		
		<!-- :dot-enabled="dot" -->
		<u-keyboard ref="uKeyboard" mode="number" v-model="show_keyboard" :mask="false"  @change="valchange"
		 @confirm="finish" @backspace="backspace" z-index="50000"></u-keyboard>
		<view class="button">
			<u-button class="u-button" @click="submit" :ripple="true" type="primary">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show_address: false,
				address: [{
						"id": 1,
						"address": '维智广场附近打印店'
					},
					{
						"id": 2,
						"address": '老图书馆打印店'
					},
					{
						"id": 3,
						"address": '弘昱园区打印店'
					}
				],
				message: {
					Address_Print: '选择打印地点',
					Notes: '',
					money: 2
				},
				rules: {
					Notes: [{
						min: 5,
						message: '备注不能少于5个字',
						trigger: ['change']
					}, {
						required: true,
						message: '请输入备注哦~',
						//可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}]
				},
				specifications: [{
						value: "2",
						name: '小型 2元/份',
						checked: true
					},
					{
						value: "3",
						name: '中型 3元/份'
					},
					{
						value: "5",
						name: '大型 5元/份'
					}
				],
				current: 0,
				radioItems: [{
						name: 'weixin',
						values: '微信',
						checked: 'true'
					},
					{
						name: 'zhifubao',
						values: '支付宝'
					}
				],
				order: 'weixin',
				Select_Address: '点击添加送到地点',
				password: '',
				show_Mask: false,
				show_keyboard: false,
				password_num:0,
				User_number:'',
				
			}
		},
		methods: {
			navigation_address() {
				// uni.navigateTo({
				// 	url:'../common_address/common_address?number='+this.User_number
				// })
				console.log('导航')
			},
			if_show() {
				this.show_address = !this.show_address;
			},
			ChangeSize(evt) {
				this.message.money = evt.detail.value;
			},
			radioChange(e) {
				this.order = e.target.value;
				console.log(this.order)
			},
			submit() {
				if (this.Select_Address == '点击添加送到地点' || this.message.Address_Print == '选择打印地点') {
					uni.showModal({
						title: '温馨提示',
						content: '请选择送达点或者打印点',
						showCancel: false
					})
					return;
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.show_Mask = true;
						this.show_keyboard = true;
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			valchange(e) {
				this.password += e;
			},
			finish() {
				console.log('这是完成')
				if (this.password.length < 6) {
					this.show_Mask = true;
					return;
				}

				if (this.password == '123456') {
					this.asyncSubmit();
					console.log('点击完成')
					this.show_Mask = false;
					this.password = ''
				} else {
					uni.showModal({
						title: '提醒',
						content: '您输入的密码有误哦',
						showCancel: false,

						success: (res) => {
							if (res.confirm) {
								console.log('用户点击了确定按钮');
								this.password = '';
								this.show_Mask = true;
								this.show_keyboard = true;
							}
						}
					})
					this.show_Mask = false;
					this.show_keyboard = false;
				}
			},
			backspace() {
				if (this.password.length == 0) {
					return;
				}
				this.password_num = this.password.length;
				this.password = this.password.substring(0, this.password_num - 1);
				--this.password_num;
				if (this.password_num == 0) {
					return;
				}

			},
			input_focus(){
				this.show_keyboard = true;
			},
			async asyncSubmit(){
				console.log(this.message)
				// const res =  this.$myRequest({
				// 	url: `/Add_PrintTask?message=${JSON.stringify(this.message)}&Info=${JSON.stringify(getApp().globalData.add_Task)}`
				// })
				// 改成全局的封装
				const res = uni.request({
					url:`http://3888n9t950.wicp.vip/Add_PrintTask?message=${JSON.stringify(this.message)}&Info=${JSON.stringify(getApp().globalData.add_Task)}`
				})
				res.then(data =>{
					if(data[1].data.code == 0){
						uni.showModal({
							title:'温馨提示',
							content:'添加成功',
							showCancel:false,
							success:()=>{
								uni.switchTab({
									url:'../../pages/index/index'
								})
							}
						})
					}
				})
			},
			navigation_address(){
				uni.navigateTo({
					url:'../../pagesB/common_address/common_address?number='+this.User_number
				})
			},
			selectAddress(index) {
				for (let i = 0; i < this.address.length; i++) {
					if (this.address[i].id === index) {
						this.message.Address_Print = this.address[i].address;
						break;
					}
				}
				this.show_address = false;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if(options){
				this.User_number = options.number;
			}
		},
		onShow() {
			uni.$on('emit_Address_Print',(data)=>{	
				this.User_number = data.number;
				if(data.name && data.telephone){
					this.Select_Address = data.name + '\xa0' + data.telephone;
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 750rpx;
		padding: 20rpx 20rpx;
		font-size: 28rpx;
		box-sizing: border-box; //保证盒子不会被撑破
		position: relative;

		.give {
			display: flex;
			line-height: 80rpx;
			margin-bottom: 10rpx;

			.give_song {
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				margin: auto 10rpx;
				margin-left: 20rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
				text-align: center;
				background: #E80000;
				color: #FFFFFF;
			}

			.content_give {
				width: 550rpx;
				height: 28rpx;
				line-height: 80rpx;
			}

		}

		.take {
			display: flex;
			height: 80rpx;
			border-radius: 50rpx;

			.take_qu {
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				margin: auto 10rpx;
				margin-left: 20rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
				text-align: center;
				background: #33FF66;
				color: #FFFFFF;
			}

			.content_take {
				width: 550rpx;
				height: 28rpx;
				line-height: 80rpx;
			}
		}

		.take_address {
			position: fixed;
			z-index: 1000;
			width: 500rpx;
			height: 130px;
			border: 1px solid #C0C0C0;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			background: rgba(0,0,0,0.6);
			color: #FFFFFF;
			left: 60px;
			transition: height 10s;

			view {
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #eee;
				padding: 0 0 0 20rpx;
				font-size: 26rpx;
				font-weight: normal;
				&:last-child{
					border-bottom: none;
					padding-bottom: 0rpx;
				}
			}
			
		}

		.size {
			width: 700rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			color: #C0C0C0;
			display: flex;

			.size_item {
				display: flex;
				width: 380rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1px solid #eee;
			}
		}

		.money {
			width: 400rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			text-align: center;

			text {
				color: red;
			}
		}

		.giveMe_money {
			display: flex;
			border-radius: 30rpx;

			.manner{
				width: 150rpx;
				height: 120rpx;
				line-height: 120rpx;
			}
			

			.payment{
				height: 100rpx;
				line-height: 100rpx;
				radio-group{
					display: flex;
					align-items: center;
					.payment_item{
						display: flex;
						align-items: center;
						margin-top: 5px;
						margin-right: 20rpx;
						.payment_name{
							margin-right: 20rpx;
						}
						.payment-radios:nth-child(1){
							margin-left: 60rpx;
								radio{
									display: block;
									margin: 0 auto;
									background-color: $main-color;
									transform: scale(0.7);
									color:rgba(0, 0, 0, 0.6);
									background-color:#fff;
								}
								
						}
					}
				}
			}
		}

		.warp {
			display: flex;
			// align-items: center;
			// justify-content: center;
			// position: relative;
			height: 100%;
		}

		.rect {
			width: 220px;
			height: 220px;
			background-color: #fff;
			// position: absolute;
			// left: 60px;
			margin: 0 auto;
			margin-top: 150rpx;
			border-radius: 100rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.rect_item1 {
				display: flex;
				font-size: 30rpx;

				image {
					width: 20px;
					height: 20px;
				}

				view {
					margin-left: 45rpx;
				}
			}

			.rect_item2 {
				font-size: 30rpx;
				text-align: center;
			}

			.rect_item3 {
				margin-top: 20rpx;
				text-align: center;
			}

			.keyboard {
				width: 90%;
				margin: 0 auto;
				margin-bottom: 15%;
			}
		}

		.button {
			width: 90%;
			height:100rpx;
			.u-button{
				background-color: $main-color !important;
			}
			margin: 30rpx auto;
		}

		.icon-song {
			font-size: 55rpx;
		}

		.icon-jiantou {
			font-size: 55rpx;
		}

		.icon-qu {
			font-size: 55rpx;
		}

		.icon-xiangxiajiantou {
			font-size: 55rpx;
		}
	}
</style>
